<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>56-Vue-组件渲染方式</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--  <one></one>-->
</div>
<template id="one">
  <div>
    <p> 组件 one</p>
  </div>
</template>
</body>
<script>
  Vue.component("one", {
    template: '#one'
  })

  /* 1. 创建 vue 实例对象 */
  let vm = new Vue({
    // 2. 声明vue的实例对象控制页面的哪个区域
    el: '#app',
    // 3. 声明vue控制区域可以使用的数据
    data: {},
    /*render(createElement) {
      return createElement("one")
    }*/
    // render: createElement => createElement("one")
    render: h => h("one")
  })
</script>
</html>
<!--
1. Vue 渲染组件的两种方式
- 先定义注册组件，然后在 Vue 实例中当作标签来使用
- 先定义注册组件，然后通过 Vue 实例的 render 方法来渲染

2. 两种渲染方法的区别
- 当作标签来渲染，不会覆盖 Vue 实例控制区域
- 通过 render 渲染，会覆盖 Vue 实例控制区域

3. render 使用箭头函数简写过程
形式一：
render(createElement) {
  return createElement("one")
}

形式二：
render: createElement => createElement("one")

形式三：
render: h => h("one")

-->
